<script lang="ts">
export default {
  name: "createModal",
};
</script>
<script lang="ts" setup>
import { ref, computed } from "vue";

const props = defineProps({
  title: {
    required: true,
    type: String,
    default: "",
  },
  time: {
    type: Number,
    default: 3000,
  },
  hide: {
    required: true,
    type: Function,
  },
  component: {
    required: true,
  },
  showFooter: {
    default: false,
  },
  size: {
    default: "30%",
  },
  data: {
    default: {},
  },
  handleClose: {
    default: () => {},
  },
});

const show = ref(true);
const componentRef = ref({ handleConfirm: () => {} });
const isString = computed(() => {
  const type = typeof props.component;
  return type == "string" ? true : false;
});
const closed = () => {
  props.hide();
  (props as any)?.handleClose();
};
const handleClose1 = () => {
  show.value = false;
};
const confirm = () => {
  componentRef.value.handleConfirm();
};
</script>

<template>
  <div>
    <el-drawer v-model="show" :size="size" :title="title" @closed="closed">
      <component
        v-if="component && !isString"
        :is="component"
        :hide="handleClose1"
        :data="data"
        ref="componentRef"
      />
      <div v-if="isString" v-html="component"></div>
      <template v-if="showFooter" #footer>
        <el-button @click="show = false"> 取消 </el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </template>
    </el-drawer>
  </div>
</template>
